<template>
	<view class="tarvel-content">
		
		<!-- #ifdef H5 -->
			<uni-nav-bar left-icon="back" left-text="返回" @clickLeft="backLastPage" class="nav-bar" title="旅游">
				
			</uni-nav-bar>
		<!-- #endif -->
		
		<view class="title">
			包头必体验
		</view>
		
		<view class="menu-block">
			<block v-for="(item, index) in citytab" :key="index">
				
				<view :class="{ activetext: index == num }" @click="menubtn(index)">{{ item.name }}</view>
			</block>
		</view>
		
		<!-- 滑动区域 -->
		<view class="list-item">
			
			<view class="list-content">
				<waterfalls-flow :list="list">
					<template v-slot:default="item">
						  <!-- 此处添加插槽内容 -->
							<view class="cnt">
								<view class="title">{{item.title}}</view>
								<view class="text">{{item.text}}</view>
							</view>
					</template>
				</waterfalls-flow>
			</view>
			
		</view>
	</view>
</template>	

<script>
	
	import waterfallsFlow from '@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue'
	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				citytab: [
					{
						name: '全部'
					},
					{
						name: '景点'
					},
					{
						name: '美食'
					},
					{
						name: '打卡'
					}
				],
				num: 0,
				list: [
					{
						id: 1,
						image_url: 'https://p1.meituan.net/320.0/tdchoteldark/320ce016a04535d0a1dadf97d4aa1c01268615.png',
						title: '咖啡酒店(万达店)',
						text: '金色胡杨林，勾魂的秋色',
						price_low: 190 
						
					},
					
					{
						id: 2,
						image_url: 'https://img1.qunarzz.com/sight/p0/201304/09/3661bb15b188e04fc8d65eac.jpg_256x160_99675040.jpg',
						title: '居延海',
						text: '海天一色秋意浓',
					},
						
					{
						id: 3,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 4,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 5,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					{
						id: 6,
						image_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637321375&t=b919353bd3074bb89c02b7b5f6a59432',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
					
					{
						id: 7,
						image_url: 'https://img1.qunarzz.com/sight/p0/1809/f6/f67f022d5b48967ca3.img.jpg_256x160_31c98a2d.jpg',
						title: '黑城弱水胡杨风景区',
						text: '看大漠古城的醉美秋色',
					},
					
					{
						id: 8,
						image_url: 'https://img1.qunarzz.com/sight/p0/1509/a9/a9d27764489ed9c8.img.jpg_256x160_d68805ff.jpg',
						title: '大漠胡杨林旅游区',
						text: '生而千年不死，死而千年不倒，倒而千年不朽',
					},
				]
			}
		},
		methods: {
			menubtn(index) {
				console.log(index);
				this.num = index;
			},
			
			// 返回上一页
			backLastPage() {
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4f4;
	}
	.tarvel-content {
		
		.nav-bar {
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 2;
		}
		
		width: 750rpx;
		margin-top: 100rpx;
		
		.title {
			margin: 0 20rpx;
			color: #292c33;
			font-size: 50upx;
		}
		
		.menu-block view {
			background: #ffffff;
			border: 1px solid #c2c5cc;
			border-radius: 6upx;
			font-size: 25upx;
			color: #292c33;
			font-weight: bold;
			text-align: center;
			padding: 15upx;
			margin: 20upx;
		}
		
		.menu-block {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.activetext {
			color: #4cd964;
			background: #ffdd00 !important;
			border: 1px solid #ffdd00 !important;
		}
		
		.list-item {
			margin: 0 20rpx;
			
			
			.list-content {
				width: 100%;
				
				
				
			}
			
		}
	}
	
	
	
</style>
